<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl" style="color: #4e598c">
        新旧版本功能点击次数对比
      </div>
    </div>
    <div class="md:flex">
      <AppFunctionStepTimePicker
        ref="AppFunctionStepTimePickerRef"
        class="w-full enter-x"
        @success="handleSuccess"
      >
      </AppFunctionStepTimePicker>
    </div>
    <div class="md:flex">
      <div :id="dailyFunctionClicksComparisonBar" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import * as echarts from 'echarts';
import { DailyFuncClickCompareDto, FunctionCompareDto } from '/@/api/operation-center/app-operation/function-analysis/model/functionAnalysisModel';
import { getDailyFunctionClicksComp } from '/@/api/operation-center/app-operation/function-analysis/functionAnalysis';
import AppFunctionStepTimePicker from '/@/views/operation-center/components/AppFunctionStepTimePicker.vue';


const dailyFunctionClicksComparisonBar = 'daily-function-clicks-comparison-bar-chart';

var option: any;

const AppFunctionStepTimePickerRef = ref();

let timeList: string[] = [];
let seriesList: any[] = [];

function convertToFuncGroupBarData(res: DailyFuncClickCompareDto[]) {
  res.forEach((item) => {
    timeList.push(item.time);
    let funcCompareList: FunctionCompareDto[] = item.functionCompareRespDtos;

    funcCompareList.forEach((funcCompareDto) => {
      let filteredSeriesItemList = seriesList.filter((m) => { return m.name === funcCompareDto.description });
      if (filteredSeriesItemList.length === 0) {
        let seriesItem = {
          name: funcCompareDto.description, 
          type: 'bar', 
          barGap: 0, 
          data: [], 
        };
        seriesList.push(seriesItem);
      }

      let filteredSeriesItem = seriesList.filter((m) => { return m.name === funcCompareDto.description })[0];
      filteredSeriesItem.data.push(funcCompareDto.num);
    });
  })
}

function initBarGroupChart(barChartName: string, xAxisData: string[], seriesData: any[], option: any) {
  let barDom = document.getElementById(barChartName);
  let myChart = echarts.init(barDom);

  option = {
    tooltip: {
      trigger: 'axis', 
      axisPointer: {
        type: 'shadow', 
      }, 
    }, 
    grid: {
      left: '0%', 
      right: '0%', 
      bottom: '10%', 
      top: '10%', 
      containLabel: true, 
    }, 
    calculable: true, 
    xAxis: [
      {
        type: 'category', 
        axisTick: { show: false }, 
        data: xAxisData, 
      }, 
    ], 
    yAxis: [
      {
        type: 'value', 
      }, 
    ], 
    series: seriesData, 
  };

  option && myChart.setOption(option);
}

const handleSuccess = (params) => {
  timeList = [];
  seriesList = [];

  getDailyFunctionClicksComp(params).then((res) => {
    convertToFuncGroupBarData(res);

    setTimeout(()=>{
      initBarGroupChart(dailyFunctionClicksComparisonBar, timeList, seriesList, option)
    }, 300);
  });
}

</script>
